<!-- 导出 -->
<template>
    <dy-dialog title="批量导出" ref="dialog" width="40%" @submitHandle="submitHandle">
        <div v-loading="loading">
            <div class="exportbox" style="position:relative;">
                <img src="@/assets/img/question.jpg" alt="">
                <span style="margin-left:22px;font-size:16px">{{ titleTxt }}</span>
            </div>
            <div v-if="!ifexportallparam">
                <p class="text">选择字段</p>
                <div class="checkBox">
                    <el-checkbox-group v-model="checkList">
                        <el-checkbox @change="handleCheckAllChange" label="全选" value="全选"></el-checkbox>
                        <el-checkbox v-for="(item, idx) in searchListArr" :key="idx" :label="item.label" :value="item.label"></el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
        </div>
    </dy-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { ref, reactive, toRefs, computed, nextTick } from 'vue'
import api from '@/api'
import commonV from '@/common'

//所有参数
const props = defineProps({
    eltableArr: {
        type: Array,
        default: () => []
    },
    selectArr: {
        type: Array,
        default: () => []
    },
    allcount: Number
})

const emits = defineEmits(['exportDataList'])

//过滤参数
let searchListArr = computed(() => {
    let arr = []
    let temparr = ["其他参数", "操作"]
    props.eltableArr.forEach(item => {
        if (temparr.indexOf(item.label) == -1) {
            arr.push(item)
        }
    })
    return arr
})

//数据
let state = reactive({
    loading: false,
    titleTxt: '',
    ifexportallparam: false,
    checkList: []
})
let { loading, titleTxt, ifexportallparam, checkList } = toRefs(state)

//实例
let dialog = ref(null)

//点击全部时触发
let handleCheckAllChange = (val) => {
    let arr = ["全选"]
    if (val) {
        //是否有筛选字段按钮-----------------
        let searchListArr = JSON.parse(JSON.stringify(props.eltableArr))
        if (commonV.ifrrandnotnone(searchListArr)) {
            searchListArr.forEach(item => {
                arr.push(item.label)
            })
        }
    }
    state.checkList = val ? arr : []
}

//打开执行方法
let openFunction = () => {
    nextTick(() => {
        //选中多少条
        state.titleTxt = props.selectArr.length ? `是否导出所选${props.selectArr.length}项` : `确定导出当前选项下的${props.allcount}条信息?`
        handleCheckAllChange(true)
    })
}

//提交
let submitHandle = () => {
    if (!state.checkList.length) {
        ElMessage({
            message: '请选择需要导出的字段!',
            type: 'warning'
        })
        return
    }
    state.loading = true
    let arr = []
    let temparr = ["其他参数", "操作"]
    state.checkList.map(item => {
        if (temparr.indexOf(item) == -1) {
            arr.push(item)
        }
    })
    emits('exportDataList', arr, props.selectArr)
    state.loading = false
    dialog.value.handleClose()
}

defineExpose({ openFunction })
</script>

<style lang="scss" scoped>
.text {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #475669;
    background: #EFF2F7;
    height: 32px;
    line-height: 32px;
    margin-top: 20px;
    padding-left: 20px;
}

.exportbox {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    padding: 20px;
    border-radius: 4px;
    overflow: auto;
}
</style>